<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:50px; height:50px; background:red; position:absolute; left:0; top:0; color:#fff; line-height:50px; text-align:center;font-size:18px;}
</style>
<script>
window.onload = function (){
  var aDiv = document.getElementsByTagName('div');
  var str = '';
  
  for (var i=0;i<9;i++){
  //num = i + 1;
  str += '<div>' + i +'</div>';
  document.body.innerHTML = str;
  }
  var len = aDiv.length;
  var t =(len+1)/2
  for (i=0;i<t;i++){
	aDiv[i].style.left = 50*i + "px";
	aDiv[i].style.top = 50*i + "px";
  }//i=t=5;
  for (var i=t;i<len;i++){
	aDiv[i].style.left = 50*i + "px";
	aDiv[i].style.top = 100*t-50*i-100 + "px";
  }
}
</script>
</head>
<body>
</body>
</html>